<template>
    <div>
        <footer v-if="bottomShow==1">
            <div v-for="(data,i) in bottomDataObj" :key="i" v-if="data.show==1" class="flex pb-btn" @click="clickBottomBtn(data)" :class="{reading:data.type==2 && replyReadedCount!=0}" :style="'width:'+data.w+'%;color:'+data.color+';background-color:'+data.bgcolor+';font-size: '+data.size+'px;'">
                <i class="iconfont" :class="[data.icon,data.iconPosition===1?'left':'top']" :style="{'margin-top': (50-data.size-16)/4 + 'px'}" v-if="data.iconPosition===1 || data.iconPosition===3"></i>
                <span v-if="!data.iconPosition || data.iconPosition===0">{{data.name}}</span>
                <span v-if="data.iconPosition===1" class="t-left">{{data.name}}</span>
                <span v-if="data.iconPosition===2" class="t-right">{{data.name}}</span>
                <span v-if="data.iconPosition===3" class="t-top">{{data.name}}</span>
                <span v-if="data.iconPosition===4" class="t-bottom" :style="{'margin-top': (50-data.size-16)/3 + 'px'}">{{data.name}}</span>
                <i class="iconfont" :class="[data.icon,data.iconPosition===2?'right':'bottom']" v-if="data.iconPosition===2 || data.iconPosition===4"></i>
            </div>
        </footer>
        <!-- 邮箱弹窗 -->
        <div v-transfer-dom>
            <popup v-model="emailSendVisible" height="170px" is-transparent style="bottom:50%; margin-bottom:-85px">
                <div style="width: 95%;background-color:#fff;height:170px;margin:0 auto;border-radius:5px;padding-top:10px;">
                    <group>
                        <x-input style="font-size:.625rem;" title="邮箱地址" type="email" v-model="emailAddress"></x-input>
                    </group>
                    <flexbox class="invite-btn" style="padding:.8rem 1rem;">
                        <flexbox-item>
                            <x-button @click.native="emailSendVisible = false">取消</x-button>
                        </flexbox-item>
                        <flexbox-item>
                            <x-button type="primary" @click.native="doSend" :show-loading="onSendingEmail" :disabled="onSendingEmail || !emailAddress" action-type="button">
                                {{onSendingEmail?'发送中···':'发送'}}</x-button>
                        </flexbox-item>
                    </flexbox>
                </div>
            </popup>
        </div>
        <rewardeffects @clearType="clearType" :integral="integral" :redpack="redpack" :lotteryList="lotteryList" @lotteryCallBack="lotteryCallBack" v-if="exciteType" :type="exciteType"></rewardeffects>
    </div>
</template>
<script>
import { TransferDomDirective as TransferDom, Popup, Cell, XButton, Group, XInput, Flexbox, FlexboxItem, Loading, Toast } from 'vux'
import Headerbar from '@/components/Headerbar'
import Rewardeffects from '@/components/Rewardeffects'
import { getMyInfo } from "@/api/user";
export default {
    data() {
        return {
            //微信openid
            openid: this.$route.query.openid,
            //企业id
            eid: this.$route.query.eid,
            //微信id
            wxid: this.$route.query.wxid,
            // 当前用户ID
            uid: null,
            emailSendVisible: false,
            emailAddress: null,
            position: 'middle',
            // 激励类型（1.积分 2.抽奖 3.红包）
            exciteType: null,
            // 积分数额
            integral: 0,
            // 红包激励记录
            redpack: null,
            // 抽奖激励记录(多个)
            lotteryList: null,
            // 抽奖完成后的回调
            lotteryCallBack: () => { },
            bottomDataObj: this.bottomData ? JSON.parse(this.bottomData) : null
        }
    },
    props: ["bottomShow", "bottomData", "replyReadedCount", "onSendingEmail", "linkman", "id", "gainId","shareUserId"],
    directives: {
        TransferDom
    },
    components: {
        Popup,
        Cell,
        XButton,
        Group,
        XInput,
        Flexbox,
        FlexboxItem,
        Loading,
        Toast,
        Rewardeffects
    },
    watch: {
        onSendingEmail(v) {
            if (!v) {
                this.emailSendVisible = false
            }
        }
    },
    methods: {
        clickBottomBtn(btn) {
            switch (btn.type) {
                case 1:
                    // 好看
                    break;
                case 2:
                    // 回复看过
                    if (this.replyReadedCount > 0) {
                        this.$vux.toast.show({
                            type: 'warning',
                            time: 3000,
                            text: '您已回复看过'
                        })
                    } else {
                        // 回复看过
                        this.$emit('replyReaded')
                    }
                    break;
                case 3:
                    // 发我邮箱
                    getMyInfo().then(res => {
                        if (res.user) {
                            this.emailAddress = res.user.email
                            this.uid = res.user.id
                        }
                        this.emailSendVisible = true
                    })
                    break;
                case 4:
                    // 我要使用
                    if (this.gainId)
                        this.$router.push({ path: 'collect', query: { id: this.id, gainId: this.gainId, shareUserId: this.shareUserId } })
                    break;
                case 5:
                    // 新闻联系人
                    if (this.linkman)
                        this.$router.push({ path: 'newslinkman', query: { spreadId: this.id } })
                    break;
                case 6:
                    // 到店
                    this.$emit('arrival')
                    break;
                case 7:
                    // 咨询
                    this.$emit('consult')
                    break;
                default:
                    location.href = btn.link
                    break;
            }
        },
        // 发我邮箱
        async sendEmail() {
            await getMyInfo().then(res => {
                if (res.user) {
                    this.emailAddress = res.user.email
                    this.uid = res.user.id
                }
            })
            this.emailSendVisible = true
        },
        async doSend() {
            if (!this.onSendingEmail) {
                this.$emit('sendEmail', this.emailAddress, this.uid)
            }
        },
        duang(type, obj, callback) {
            this.exciteType = type
            if (obj) {
                this.integral = obj.integral
                this.redpack = obj.redpack
                this.lotteryList = obj.lotteryList
            }
            if (callback) {
                this.lotteryCallBack = callback
            }
        },
        // 清除type，页面有多个特效时候，点击后遮罩层覆盖了页面内容，无法再次点击。由子组件调用
        clearType() {
            this.exciteType = null
        }
    },
    created() {
        this.bottomDataObj.forEach(e => {
            console.log(e)
            if (!e.icon) {
                switch (e.type) {
                    case 1:
                        // 好看
                        e.icon = 'icon-hao'
                        e.iconPosition = 3
                        break;
                    case 2:
                        // 回复看过
                        e.icon = 'icon-eyes1'
                        e.iconPosition = 3
                        break;
                    case 3:
                        // 发我邮箱
                        e.icon = 'icon-email'
                        e.iconPosition = 3
                        break;
                    case 4:
                        // 我要使用
                        e.icon = 'icon-collect'
                        e.iconPosition = 3
                        break;
                    case 5:
                        // 新闻联系人
                        e.icon = 'icon-people'
                        e.iconPosition = 3
                        break;
                }
            }

        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>